<template>
  <div class="hot">
    <div class="hot-header">
      <div>
        <div class="hh-img"></div>
        <div class="hot-time">更新日期：12月02日</div>
      </div>
    </div>
    <div>
      <div v-if="cat">
        <ListComponent @addToListenList="$emit('addToListenList',playlists)" :songId="songId" v-for="(listItem,index) in playlists" :key="listItem.id" :listItem="listItem" :index="index+1" :showTitle="showTitle" :isStop="$attrs.isStop"/>
      </div>
      <WaitLoad v-else/>
    </div>
    <div v-if="err">出错啦~</div>
  </div>
</template>

<script>
import ListComponent from "@/components/ListComponent.vue";
import WaitLoad from "@/components/WaitLoad.vue";
  export default {
    name:"HotView",
    props:{
      songId:{
        type:Number,
        default:0
      }
    },
    data(){
      return {
        playlists:[],
        cat:false,
        err:false,
        showTitle:false
      }
    },
    components:{
      ListComponent,
      WaitLoad
    },
    async created(){
      let resultNew = await this.axios.get("/top/song?type=0");
      if(resultNew.status==200){
        let {data} = resultNew.data;
        this.playlists = data.splice(10,10);
        this.err = false;
      }else{
        this.err = true;
      }
      this.cat= true;
    }
  }
</script>

<style lang="scss" scoped>
.hot{
  width: 100%;
  .hot-header{
    position: relative;
    width: 100%;
    height: 1.45rem;
    background-image: url(@/../public/images/005.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    >div{
      position: absolute;
      margin-left: 0.2rem;
      z-index: 50;
      .hh-img{
        width: 1.42rem;
        height: 0.67rem;
        overflow: hidden;
        background-image: url(@/../public/images/004.png);
        background-size: cover;
        background-repeat: no-repeat;
      }
      .hot-time{
        font-size: 0.12rem;
        color: #fff;
        margin-top: 0.1rem;
        opacity: 0.8;
      }
    }
    &::after{
      content: "";
      position: absolute;
      z-index: 20;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background-color: rgba($color: #000000, $alpha: 0.2);
    }
  }
}
</style>